<template>
  <view class="map-box">
    <NavBar
      title="定位"
      leftArrow
      rightText="确定"
      @click-left="navBack()"
      @click-right="confirmLocation"
    />
    <map
      class="map"
      id="map"
      :controls="[
        {
          id: 10086,
          position: {
            left: left,
            top: top,
            width: 40,
            height: 40,
          },
          iconPath: '/static/image/friend/location.png',
        },
      ]"
      :zIndex="2101"
      :show-compass="true"
      :enable-rotate="true"
      :enable-overlooking="true"
      :enable-poi="true"
      :enable-building="true"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      @regionchange="regionChange"
    ></map>
  </view>
</template>

<script>
import NavBar from "./NavBar/NavBar.vue";
import { navBack } from "@/utils/utils.js";
export default {
  props: ["Platitude", "Plongitude", "mapNavShow"],
  data() {
    return {
      navBack,
      left: 0,
      top: 0,
      //'../static/image/friend/location.png'
      latitude: this.Platitude, // 初始纬度
      longitude: this.Plongitude, // 初始经度
      scale: 14,
      centerLatitude: 39.915, // 地图中心点纬度
      centerLongitude: 116.404, // 地图中心点经度
      regionChangeTimeout: null, // 添加防抖定时器
    };
  },
  components: { NavBar },
  created() {
    const userInfo = uni.getStorageSync("userInfo");

    if (!this.Plongitude) {
      this.longitude = userInfo.lng;
      this.centerLongitude = userInfo.lng;
    }

    if (!this.Platitude) {
      this.latitude = userInfo.lat;
      this.centerLatitude = userInfo.lat;
      this.firstApi();
    }
  },
  mounted() {
    const win = uni.getWindowInfo();
    this.left = win.windowWidth / 2;
    this.top = win.windowHeight / 2;
  },
  methods: {
    firstApi() {
      uni.showToast({
        title: "定位中...",
        icon: "none",
        mask: true,
        duration: 2000,
      });

      uni.getLocation({
        type: "gcj02",
        geocode: true,
        success: (locationRes) => {
          console.log("定位信息", locationRes);
          uni.hideToast();
          this.latitude = locationRes.latitude;
          this.longitude = locationRes.longitude;
          this.centerLatitude = locationRes.latitude;
          this.centerLongitude = locationRes.longitude;
        },
        fail: (err) => {
          uni.hideToast();

          uni.showToast({
            title: `获取位置失败 ${JSON.stringify(err)}`,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    // 地图视野变化时触发，获取中心点坐标
    regionChange(e) {
      if (e.type === "end") {
        clearTimeout(this.regionChangeTimeout); // 清除之前的定时器

        // 防抖处理，减少频繁获取中心点坐标的次数
        this.regionChangeTimeout = setTimeout(() => {
          // 只在视野变化结束时获取坐标
          const mapCtx = uni.createMapContext("map");
          mapCtx.getCenterLocation({
            success: (res) => {
              console.log("移动时的位置信息", res);
              this.centerLatitude = res.latitude;
              this.centerLongitude = res.longitude;
            },
          });
        }, 500); // 延迟500ms执行
      }
    },
    //取消
    cancel() {
      this.$emit("mapCancel", false);
    },
    // 点击确认按钮时返回当前地图中心点的坐标
    confirmLocation() {
      console.log("点击");
      uni.showModal({
        title: "确认位置",
        content: `纬度: ${this.centerLatitude}, 经度: ${this.centerLongitude}`,
        success: (res) => {
          if (res.confirm) {
            // 这里可以进一步处理，比如将坐标返回给上一页或进行其他操作
            const data = {
              latitude: this.centerLatitude,
              longitude: this.centerLongitude,
            };
            this.$emit("mapConfirm", data);
            this.cancel();
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.map-box {
  position: fixed;
  // top: 0;
  top: var(--status-bar-height);
  // left: 0;
  left: var(--status-bar-height);
  width: 100%;
  height: 100vh;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding-top: 100rpx;

  .map {
    width: 100%;
    height: calc(100vh - 100rpx);

    .uni-map-control,
    .uni-cover-image {
      z-index: 2001;
    }
  }
}
</style>
